<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试代码</title>
    <style>
        a{
            display: block;
            margin: 1em;
            font-size: 20px;
            line-height: 1em;
        }
    </style>
</head>
<body>
    <header>
        <h1>用于实践所学例子</h1>
    </header>
    <section>
        <a id="preventDefault" href="www.baidu.com">测试event 的 preventDefault</a>

        <div class="touch-event-wrapper">
            <a class="touch-event">to touch</a>
        </div>
    </section>
    <script>
        var $ = function(string){
            return document.querySelector(string);
        };
        var log = function (msg) {
            console.log(msg);
        };
        function cancelBubble(e) {
            if(e.stopPropagation){
                e.stopPropagation();
            }
            else
            //是全部阻止吗?
                window.event.cancelBubble = true;
        }

        (function(log){
//            var prevent = document.getElementById('preventDefault');
            var node = document.querySelector('#preventDefault');
//            log(node);
            node.onclick = function(e){
                log(e)
                e.preventDefault();
                //这句话有用
                //e.stopPropagation();
            };

            document.body.onclick = function (e) {
//                e && log(e);
                log('body click');
            };
        })(log);

        (function($,log){
            var node = $('.touch-event');
            node.addEventListener('touchend', function (e) {
//               log(e);
                //闭包外的变量与函数可以进来
                log(e)
                //这句话才有用!
                e.preventDefault();
            });
        })($,log);
//        log(node);

        (function(){
            var a;
            a();

            a = function(){
                alert(1);
            }

            function a(){
                alert(2);
            }

            this.a = function a(){
                alert(3);
            }
            a();
        }());

        a();
    </script>
</body>
</html>
